<style lang="less">
    @import "../../../../styles/common.less";
</style>
<template>
    <Modal v-model="testModel" :closable='false' :mask-closable=false :width="700">
        <div class="clearfix">
            <p slot="title" style="padding-bottom: 16px">
                中药列表：
            </p>
            <div>
                <Table border ref="selection" :loading="address_loading" :columns="list" :data="tableData" @on-select="getSel" @on-select-all="selectAll" @on-select-cancel="selectCancel"></Table>
            </div>
            <Page ref="pages" :total="itemTotal" show-total style="float: right; margin-top: 20px" @on-change="getList"></Page>
        </div>
        <div slot="footer">
            <div style="">
                <Button type="primary" @click="hideModel">取消</Button>
                <Button type="success" @click="sureModel">确定</Button>
            </div>
        </div>
    </Modal>
</template>

<script>
import ajax from "../../../../libs/axios.js"
export default {
    name: 'testModule',
    props: {
        testModel: Boolean,
        selectData: Array
    },
    data () {
        return {
            address_loading: false,
            list: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: "用户昵称",
                    align: 'center',
                    key: "nickName"
                },
                {
                    title: "手机号",
                    align: 'center',
                    key: "tel"
                },
                {
                    title: "用户名称",
                    align: 'center',
                    key: "username"
                }
            ],
            data: [],
            // selectData: [],
            itemTotal: 0,
            searchvalue: '',
            tableData: []
        }
    },
    methods: {
        init () {
            this.getList("1")
        },
        hideModel () {
            this.$emit('hideModel', false)
        },
        sureModel () {
            this.$emit('hideModel', false)
            console.log(this.selectData)
            this.$emit('selectFunction', this.selectData)
        },
        getSel (seletion, row) {

            this.selectData.push({
                id: row.id,
                name: row.nickName
            })
        },
        selectAll (seletion) { // 点击全选时触发
            seletion.forEach(item => {
                this.selectData.push({
                    id:item.id,
                    name: item.nickName
                })
            })
        },
        selectCancel (seletion, row) {
            debugger
            let _selets = this.selectData
            // 从选种的集合中删除数据
            for (var i = _selets.length - 1; i > 0; i--) {
                if (_selets[i].id === row.id) {
                    _selets.splice(i,1)
                }
            }
        },
        getList (page) {
            let url = "adminapi/user/listData.html"
            let data = {
                tel: this.searchvalue,
                pageSize:10,
                pageNumber: page
            }
            ajax.formRes(url, data).then(res => {
                this.itemTotal = res.recordCount
                this.tableData = res.users
                // 1、循环获取的数据
                this.tableData.forEach(item => {
                    // 2、循环选中的数据
                    for (let sdata of this.selectData) {
                        // 3、比较数据，如果相等，则默认选中
                        if (sdata.id === item.id) {
                            item._checked = true
                        }
                    }
                })
            })
                .catch(res => {
                    console.log("有错误信息")
                    // fail
                })
        }
    },
    created () {
        console.log("**********************页面初始化加载***************")
        this.init()
    }
}
</script>
